<template>
<v-container>
  <v-form
      ref="form"
      :lazy-validation="false"
    >
    <v-card class="mb-4">
      <v-card-title class="pa-2 justify-space-between">
        <div>游客名单</div>
        <v-btn color="primary" rounded small @click="addTourist">{{ $t('actions.add') }}</v-btn>
      </v-card-title>
      <v-divider />
      <v-card-text class="px-0">
        <el-table
          :data="touristData">
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            label="游客类型"
            width="180">
            <template slot-scope="{ row }">
              <v-select
                v-model="row.sex"
                :items="[{key: 1, name: '男', key: 2, name: '女'}]"
                item-text="name"
                item-value="key"
                outlined
                dense
                hide-details
              ></v-select>
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            width="180">
            <template slot="header">
              <span class="mr-1">姓名</span>
              <small style="color: red">({{$t('other.required')}})</small>
            </template>
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.fullname"
                outlined
                single-line
                hide-details
                dense
                :rules="[rules.required]"
                required
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="英文名"
            width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.fullname"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="性别"
            width="140">
            <template slot-scope="{ row }">
              <v-select
                v-model="row.sex"
                :items="['男', '女']"
                outlined
                dense
                hide-details
              ></v-select>
            </template>
          </el-table-column>
          <el-table-column
            label="证件类型"
            width="160">
            <template slot-scope="{ row }">
              <v-select
                v-model="row.sex"
                :items="[{key: 2, name: '女'}, {key: 1, name: '男'}]"
                item-text="name"
                item-value="key"
                outlined
                dense
                hide-details
              ></v-select>
            </template>
          </el-table-column>
          <el-table-column
            label="证件号码"
            width="180">
            <template slot="header">
              <span class="mr-1">证件号码</span>
              <small style="color: red">({{$t('other.required')}})</small>
            </template>
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.fullname"
                outlined
                single-line
                hide-details
                dense
                :rules="[rules.required]"
                required
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="证件有效期"
            width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.phone"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="联系电话"
            width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.phone"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="国籍"
            width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.phone"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            min-width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.phone"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            :label="$t('other.action')"
            width="80">
            <template slot-scope="{ $index }">
              <v-btn small color="warning" outlined @click="handleRmoveConcatUser($index)">{{ $t('actions.delete') }}</v-btn>
            </template>
          </el-table-column>
        </el-table>
      </v-card-text>
    </v-card>
  </v-form>
  <v-footer
    fixed
    style="background: transparent"
  >
    <v-row justify="center" class="py-2">
      <v-btn class="mr-8" @click="$router.back()">返回</v-btn>
      <v-btn color="primary">保存</v-btn>
    </v-row>
  </v-footer>
</v-container>
</template>

<script>
export default {
  data() {
    return {
      touristData: [],
      rules: {
        required: value => !!value || 'required',
      }
    }
  },
  methods: {
    // 添加游客
    addTourist() {
      this.touristData.push({
        fullname: '',
        phone: '',
        email: ''
      })
    },
    // 删除游客
    handleRmoveTourist(index) {
      this.touristData.splice(index, 1)
    },
  }
}
</script>

<style>

</style>